<template>
  <open-drawer ref="RefChilde" @getData="changePage(paginationProps.current, paginationProps.pageSize)" :chosId="chosId" :type="type" :form="InterviewData" />

  <div class="header">
    <h4 class="title">面试安排</h4>
    <img class="picture" src="../../../../assets/img.png" />
  </div>

  <div class="bread">
    <h1 class="breadtext">> 面试列表</h1>
    <div class="btn">
      <a-button size="large" shape="round" type="primary" @click="openAddForm">
        <PlusOutlined />
        新增面试
      </a-button>
    </div>
  </div>

  <a-list item-layout="horizontal" :data-source="data" :pagination="paginationProps">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <p class="messagetitle">{{ item.title }}</p>
          </template>

          <template #description>
            <p>{{ item.create_by }}创建于{{ item.created_at.substring(0, 10) }}</p>
            <p>面试状态:{{ item.status }}</p>
          </template>
        </a-list-item-meta>

        <template #actions>
          <a @click="checkSession(item.id)">查看场次</a>
          <a @click="checkDetail(item.id)">查看面试者分数</a>
          <a @click="openAddForm(item.id)">修改</a>
          <a-popconfirm title="确定要删除该消息?" ok-text="删除" cancel-text="取消" @confirm="onDelete(item.id)">
            <a v-show="role == '1'">删除</a>
          </a-popconfirm>
        </template>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts">
import { Ref, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { get, detele } from '../../../../utils/request/request'
import OpenDrawer from './OpenDrawer.vue'
import { useRoute, useRouter } from 'vue-router'

interface DataItem {
  id: number
  title: string
  status: number | string
  create_by: string
}

interface PaginationProps {
  current: number
  pageSize: number
  total: number
  showSizeChanger: boolean
  pageSizeOptions: string[]
  showTotal: (total: string) => string
  onChange: (current: number, pageSize: number) => Promise<void>
  onShowSizeChange: (current: number, pageSize: number) => Promise<void>
}

const data: Ref<DataItem[]> = ref([])

// 表格数据相关
const useTableDataEffect = (token: string) => {
  // 分页配置
  const paginationProps = ref({
    current: 1,
    pageSize: 10,
    total: 20,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}轮面试`,
    onChange: (current: number, pageSize: number) => changePage(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => changePage(current, pageSize)
  })

  const changePage = async (pageNumber: number, pageSize: number) => {
    const res: any = await get(`/admin/api/v1/recruitment/interview/list?page=${pageNumber}&limit=${pageSize}`, token)
    paginationProps.value.current = res?.pagination?.page
    paginationProps.value.pageSize = res?.pagination?.limit
    paginationProps.value.total = res?.pagination?.total
    data.value = res?.data
    const modifiedData = res.data
    modifiedData.forEach((question: DataItem) => {
      if (question.status === 0) {
        question.status = '未发布'
      } else if (question.status === 1 || question.status === 2) {
        question.status = '已发布'
      } else if (question.status === 3) {
        question.status = '已结束'
      }
    })
    data.value = modifiedData
  }
  return { paginationProps, changePage }
}

// 表格操作相关
const useOperationEffect = (token: string, paginationProps: Ref<PaginationProps>) => {
  const router = useRouter()
  const { changePage } = useTableDataEffect(token)

  // 跳转到新增面试
  const addStatus = (type: 0) => {
    router.push({
      name: 'interviewOperate',
      params: {
        type: type,
        id: 0
      }
    })
  }
  // 跳转到修改面试
  const changeStatus = (id: number, type: 1) => {
    router.push({
      name: 'interviewOperate',
      params: {
        id: id,
        type: type
      }
    })
  }
  // 跳转到查询场次页面
  const checkSession = (propsId: number) => {
    router.push({
      name: 'sessionList',
      params: { id: propsId }
    })
  }
  // 跳转到评分页面
  const checkDetail = (propsId: number) => {
    router.push({
      name: 'scoreList',
      params: { id: propsId }
    })
  }
  // 删除
  const onDelete = async (id: number) => {
    const res: any = await detele(`/admin/api/v1/recruitment/interview/${id}`, {}, token)
    if (res.status_msg == 'success') {
      changePage(paginationProps.value.current, paginationProps.value.pageSize)
      data.value = data.value.filter((item) => item.id !== id)
    }
  }

  return { changeStatus, checkDetail, onDelete, addStatus, checkSession }
}

// 弹框子组件
const useChildEffect = (token: string) => {
  const chosId = ref<number | undefined>()
  const type = ref<number>(0) // 0为新增，1为编辑
  const InterviewData = ref()
  const RefChilde = ref()
  const openAddForm = async (id: number) => {
    chosId.value = id
    RefChilde.value.showDrawer()
    if (id > 0) {
      type.value = 1
      const res: any = await get(`/admin/api/v1/recruitment/interview/${id}`, token)
      if (res.status_code === 0) {
        InterviewData.value = res.data
      } else {
        message.error('错误')
      }
    } else {
      type.value = 0
      InterviewData.value = undefined
    }
  }
  return { chosId, type, InterviewData, RefChilde, openAddForm }
}

export default {
  components: {
    PlusOutlined,
    OpenDrawer
  },
  setup() {
    const role = ref<string>(localStorage.getItem('role') as string)
    const token: string = localStorage.getItem('token') as string
    const route = useRoute()
    const { paginationProps, changePage } = useTableDataEffect(token)
    const { addStatus, changeStatus, checkDetail, checkSession, onDelete } = useOperationEffect(token, paginationProps)
    const { chosId, type, InterviewData, RefChilde, openAddForm } = useChildEffect(token)

    onMounted(async () => {
      await changePage(paginationProps.value.current, paginationProps.value.pageSize)
      const status = route.params.status
      if (status == '0') {
        RefChilde.value.showDrawer()
      }
    })

    return {
      paginationProps,
      changePage,
      addStatus,
      data,
      role,
      route,
      changeStatus,
      checkDetail,
      onDelete,
      checkSession,
      chosId,
      type,
      InterviewData,
      RefChilde,
      openAddForm
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  display: inline-block;
  padding-left: 750px;
}
.breadtext {
  display: inline-block;
  font-family: SourceHanSansCN-Bold;
  font-size: 24px;
  font-weight: bold;
  line-height: 50.4px;
  letter-spacing: 0.2em;
  color: #000000;
}
.header {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgb(13, 102, 206);
}
.title {
  display: inline-block;
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  margin: 1.7%;
  margin-left: 6%;
  letter-spacing: 20px;
}
.picture {
  width: 10%;
  margin-left: 660px;
  border-radius: 10px;
  background-color: #4c63e9;
}
.messagetitle {
  font-size: 20px;
}
</style>
